<template>
  <div class="echarts-box">
    <div :id="id" :class="className" :style="{ height, width }" />
  </div>
</template>

<script setup lang="ts">
import {  ref, onMounted } from "vue";
import * as echarts from 'echarts';

const props = defineProps({
  id: {
    type: String,
    default: "lineEcharts",
  },
  className: {
    type: String,
    default: "",
  },
  width: {
    type: String,
    default: "100%",
    required: true,
  },
  height: {
    type: String,
    default: "220px",
    required: true,
  },
});

const chart: Ref<echarts.ECharts | null> = ref(null);

/** 设置图表  */
const setChartOptions = (data: any) => {
  if (!chart.value) {
    return;
  }
  const options = {
    color: ['#80FFA5', '#00DDFF', '#37A2FF', '#FF0087', '#FFBF00'],
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        label: {
          backgroundColor: '#6a7985'
        }
      }
    },
    legend: {
      data: data.legend,
      left: '0',
      textStyle: {
        color: "#ffffff"
      }
    },
    grid: {
      top: '15%',
      left: '1%',
      right: '1%',
      bottom: '2%',
      containLabel: true
    },
    xAxis: [
      {
        type: 'category',
        boundaryGap: false,
        data: data.xAxis,
        axisLabel: {
          textStyle: {
            color: "#ffffff"
          }
        }
      }
    ],
    yAxis: [
      {
        type: 'value',
        axisLabel: {
          textStyle: {
            color: "#ffffff"
          }
        }
      }
    ],
    series: data.series
  };

  chart.value.setOption(options);
};

const loadData = () => {
  setChartOptions({
    legend: ['成交订单量', '成交人数'],
    xAxis: ['20:12', '21:02', '21:52', '22:42', '23:32'],
    series: [
      {
        name: '成交订单量',
        type: 'line',
        stack: 'Total',
        smooth: true,
        lineStyle: {
          width: 0,
        },
        showSymbol: false,
        areaStyle: {
          opacity: 0.8,
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: 'rgb(128, 255, 165)'
            },
            {
              offset: 1,
              color: 'rgb(1, 191, 236)'
            }
          ])
        },
        emphasis: {
          focus: 'series'
        },
        data: [140, 232, 101, 264, 90, 340, 250]
      },
      {
        name: '成交人数',
        type: 'line',
        stack: 'Total',
        smooth: true,
        lineStyle: {
          width: 0
        },
        showSymbol: false,
        areaStyle: {
          opacity: 0.8,
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: 'rgb(55, 162, 255)'
            },
            {
              offset: 1,
              color: 'rgb(116, 21, 219)'
            }
          ])
        },
        emphasis: {
          focus: 'series'
        },
        data: [140, 232, 101, 264, 90, 340, 250]
      },
    ]
  });
}

// 窗口大小变化时，重置图表大小
const handleResize = () => {
  setTimeout(() => {
    if (chart.value) {
      chart.value.resize();
    }
  }, 100);
};

onMounted(() => {
  chart.value = markRaw(echarts.init(document.getElementById(props.id) as HTMLDivElement));
  loadData();
  window.addEventListener("resize", handleResize);
})

</script>

<style scoped>

</style>
